<template>
	<view class="content">
		<view class="search">
			<!-- <u-search placeholder="关键字搜索：标题、昵称" v-model="form.keyword" :show-action="true" bg-color="#F6F6F6"></u-search> -->
			<view class="add_butn" v-if="!$status"><view class="button" @click="$to('/pages/article/add')">发布</view></view>
		</view>
		<view class="card_list">
			<view class="card_item" v-for="(item, index) in article_list" :key="index" @click="$to('/pages/article/article?id=' + item.id)">
				<u-lazy-load v-if="item.head_img" threshold="300" border-radius="10" :image="item.head_img" class="img"></u-lazy-load>
				<view class="title">
					<view class="wall" v-if="!item.head_img && !$status" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
					{{ item.title }}
				</view>
				<view class="absolute_priority" v-if="item.priority">置顶</view>
				<view v-if="item.head_img && !$status" class="wall absolute_wall" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
				<view class="name">{{ item.name }}</view>
				<view class="date"><uni-dateformat format="MM/dd hh:mm:ss" :threshold="[600000, 3600000]" :date="item.create_time"></uni-dateformat></view>
			</view>
			<!-- <u-waterfall v-model="article_list" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view v-for="(item, index) in leftList" :key="index" class="card_item" @click="$to('/pages/article/article?id=' + item.id)">
						<u-lazy-load v-if="item.head_img" threshold="300" border-radius="10" :image="item.head_img" class="img"></u-lazy-load>
						<view class="title">
							<view class="wall" v-if="!item.head_img" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
							{{ item.title }}
						</view>
						<view class="absolute_priority" v-if="item.priority">置顶</view>
						<view v-if="item.head_img" class="wall absolute_wall" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
						<view class="name">{{ item.name }}</view>
						<view class="date"><uni-dateformat format="MM/dd hh:mm:ss" :threshold="[600000, 3600000]" :date="item.create_time"></uni-dateformat></view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view v-for="(item, index) in rightList" :key="index" class="card_item" @click="$to('/pages/article/article?id=' + item.id)">
						<u-lazy-load v-if="item.head_img" threshold="300" border-radius="10" :image="item.head_img" class="img"></u-lazy-load>
						<view class="title">
							<view class="wall" v-if="!item.head_img" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
							{{ item.title }}
						</view>
						<view class="absolute_priority" v-if="item.priority">置顶</view>
						<view v-if="item.head_img" class="wall absolute_wall" :style="{ backgroundColor: item.wall_color || '#ee5253' }">{{ item.wall_title }}</view>
						<view class="name">{{ item.name }}</view>
						<view class="date"><uni-dateformat format="MM/dd hh:mm:ss" :threshold="[600000, 3600000]" :date="item.create_time"></uni-dateformat></view>
					</view>
				</template>
			</u-waterfall> -->
		</view>
		<u-loadmore v-show="article_list.length < pagination.total" :status="loadStatus"></u-loadmore>
	</view>
</template>

<script>
import { article_lsit } from '@/api/index.js';
export default {
	data() {
		return {
			article_list: [],
			pagination: {
				limit: 10, //一页几条
				page: 1, //第几页
				total: 0
			},
			form: {
				keyword: ''
			},
			loadStatus: 'loadmore'
		};
	},
	onReady() {
		this.getList();
		uni.$on('add_end', () => {
			this.getList(); //添加文章后刷新
		});
	},
	onPullDownRefresh() {
		//下拉刷新
		this.getList();
	},
	onReachBottom() {
		this.loadStatus = 'loading';
		setTimeout(() => {
			if (this.pagination.total == this.article_list.length) {
				this.loadStatus = 'nomore';
			} else {
				this.getList(true);
			}
		}, 800);
	},
	methods: {
		getList(status = false) {
			if (status) {
				this.pagination.page += 1;
			} else {
				//this.$refs.uWaterfall.clear();
				this.pagination.page = 1; //重新加载
			}

			article_lsit({
				...this.pagination
				//...this.form
			}).then(res => {
				console.log(res, '获取的数据');
				this.pagination.total = res.data.total;
				uni.stopPullDownRefresh(); //关闭下拉刷新
				if (status) {
					//是否继续加载
					res.data.data.forEach(item => {
						this.article_list.push(item);
					});
				} else {
					this.article_list = res.data.data;
				}
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f4f4f4;
}
</style>
<style lang="scss" scoped>
.content {
	padding-bottom: 20rpx;
	.add_butn {
		padding-top: 20rpx;
		.button {
			text-align: center;
			border-radius: 10rpx;
			line-height: 65rpx;
			height: 65rpx;
			font-size: 32rpx;
			color: #fff;
			background: linear-gradient(#2ed573, #20bf6b);
			font-weight: 300;
		}
	}
}
.card_list {
	padding: 20rpx;
	column-count: 2;
	margin-top: 110rpx;
}
.card_item {
	width: 340rpx;
	break-inside: avoid;
	background-color: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	position: relative;
	.img {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
	}
	.title {
		color: #303133;
		font-size: 32rpx;
		font-weight: 300;
	}
	.absolute_priority {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		padding: 4rpx 10rpx;
		font-size: 25rpx;
		background-color: #eb2f06;
		color: #fff;
		border-radius: 10rpx 0 10rpx 0;
	}
	.wall {
		&.absolute_wall {
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			margin: 0;
		}
		display: inline-block;
		border-radius: 10rpx;
		color: #fff;
		padding: 4rpx 10rpx;
		font-size: 25rpx;
		margin-right: 8rpx;
		white-space: nowrap;
	}
	.name {
		color: #007aff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.date {
		color: #b2bec3;
		font-size: 25rpx;
		text-align: right;
	}
}
</style>
